<template>
  <el-row>
    <base-layout>
      <template #searchPanel>
        <el-form
          :inline="true"
          ref="fromdata"
          :show-message="false"
          :hide-required-asterisk="true"
          :model="fromdata"
          :rules="rules"
          label-width="90px"
          label-position="right"
        >
          <el-row class="">
            班组信息
            <!-- <el-col :span="12"></el-col> -->
          </el-row>
          <el-divider content-position="center"></el-divider>
          <el-row>
            <el-form-item label="班组名称:">
              <el-input
                clearable
                v-model="fromdata.teamName"
              />
            </el-form-item>
            <el-form-item
              label="所属门店:"
              prop="type"
            >
              <Job-shop
                v-model="fromdata.storeId"
                placeholder="所属门店"
              />
            </el-form-item>
            <el-form-item
              label="班组类别:"
              prop="type"
            >
              <el-select
                clearable
                v-model="fromdata.teamTypeDictId"
              >
                <el-option
                  v-for="item in dict['班组类型']"
                  :key="item.index"
                  :value="item.value"
                  :label="item.text"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="状态:">
              <el-switch
                v-model="fromdata.status"
                :active-text="fromdata.status?'正常':'停用'"
              >
              </el-switch>
            </el-form-item>

            <el-form-item label="备注:">
              <el-input
                type="textarea"
                rows="3"
                clearable
                v-model.number="fromdata.remark"
                style="width: 503px"
              />
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template #contentPanel>
        <div style="line-height: 34px">
          <span>组员列表</span>
          <el-button
            type="primary"
            style="border: 0; width: 100px; float: right"
            @click="addEmployee"
          >添加员工</el-button>
        </div>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <data-table
            :value="tableData"
            :total-count="tableData.length"
            :has-action="true"
            :table-column-attributes="tableColumnAttributes"
            :width="160"
            :isShowPage="true"
            :localPage="true"
          >
            <template #action="{ row }">
              <i
                class="el-icon-delete"
                title="删除"
                style="color: red; margin-left: 20px; cursor: pointer"
                @click="delUserList(row)"
              ></i>
            </template>
          </data-table>
        </el-row>

        <el-col
          :span="24"
          align="right"
        >
          <el-button
            type="primary"
            style="width: 100px"
            @click="onSubmit"
          >保存</el-button>
        </el-col>
      </template>
    </base-layout>
    <el-dialog
      v-if="employeeVisible"
      title="员工选择"
      :visible.sync="employeeVisible"
      :append-to-body="true"
      width="800px"
      @close="employeeDialogClose"
      :before-close="employeeHandleClose"
    >
      <SelectionEmployee @getList="getEmployee" />
    </el-dialog>
  </el-row>
</template>
<script>
import baseMixin from '@/mixins/base'
import {
  add,
  putTeam,
  teamDetail
} from '@/api/after-sale/personnel/team'
import {
  getDict
} from '@/utils'
import {
  SelectionEmployee
} from '@/components/index'
import {
  deleteWash
} from '@/api/after-sale/workOrderManage/car-wash'
export default {
  components: {
    SelectionEmployee,
  },
  mixins: [baseMixin({})],
  data () {
    return {
      employeeVisible: false, //员工选择弹窗
      tableColumnAttributes: [{
        name: '所属门店',
        value: 'storeName',
        type: 'text'
      },
      {
        name: '员工编号',
        value: 'code',
        type: 'text'
      },
      {
        name: '员工姓名',
        value: 'userName',
        type: 'text'
      },
      {
        name: '员工联系方式',
        value: 'phone',
        type: 'text'
      },
      {
        name: '员工职位',
        value: 'roleName',
        type: 'text'
      },
      {
        name: '等级',
        value: 'updateTime',
        type: 'select',
        valueId: 'grade',
        options: [{
          id: 1,
          value: '组长'
        },
        {
          id: 2,
          value: '组员'
        },
        ],
        action: this.grade,
      },
      ],
      fromdata: {
        teamName: '',
        storeId: '',
        teamTypeDictId: '',
        status: true,
        remark: '',
        groupUserId: '', //组长id
        userIds: [], //员工集合
      },
      rules: {},
      dialogImageUrl: '',
      imageDialogVisible: false,
      dict: [],
    }
  },
  methods: {
    //选择组员或组长
    grade (value) {
      if (value.grade == 1) {
        //组长
        this.fromdata.groupUserId = value.id
        this.tableData.forEach((item) => {
          if (item.id != value.id) {
            this.$set(item, 'grade', 2)
          }
        })
      }
    },
    //删除选择员工
    delUserList (row) {
      let _index = 0;
      this.tableData.forEach((item, index) => {
        if (item.id == row.id) {
          _index = index;
        }
      })
      this.tableData.splice(_index, 1)
    },
    employeeHandleClose () {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.employeeDialogClose()
        })
        .catch((_) => { })
    },
    employeeDialogClose () {
      this.employeeVisible = false
    },
    //获取员工选择列表
    getEmployee (list) {
      console.log('获取员工相关信息', list)
      let arry = [];
      if (this.tableData.length > 0) {
        let ids = this.tableData.map(item => { return item.id })
        list.map(item2 => {
          if (!ids.includes(item2.id)) {
            arry.push(item2);
          }
        })
      } else {
        arry = list;
      }
      this.tableData = this.tableData.concat(arry);
      this.employeeDialogClose()
    },
    //添加员工
    addEmployee () {
      this.employeeVisible = true
    },
    async onSubmit () {
      this.$refs.fromdata.validate(async (valid) => {
        if (valid) {
          if (!this.fromdata.groupUserId) {
            this.$message.error('请选择组长')
            return;
          }
          const options = this.fromdata;
          options.userIds = [];
          this.tableData.forEach(item => {
            options.userIds.push(item.id)
          })
          let {
            success
          } = !this.fromdata.id ? await add(options) : await putTeam(options);
          if (success) {
            this.$message.success('操作成功')
            this.closeRouter('/personnel/team')
          } else {
            this.$message.success('操作失败')
          }
        } else {
          return false
        }
      })
    },
  },
  async mounted () {
    this.dict = getDict(['班组类型']);
    let id = this.$route.query.id;
    if (id) {
      let {
        data
      } = await teamDetail(id);
      this.tableData = data.crewList;
      delete this.fromdata.crewList;
      this.fromdata = { ...data };
      this.tableData.forEach(item => {
        if (item.id == data.groupUserId) {
          this.$set(item, 'grade', 1);
        } else {
          this.$set(item, 'grade', 2);
        }
      })
    }
  },
}

</script>
